<template>

    <div style="float: left;margin-top: 40px">
        <h1>群成员</h1>
        <ul class="main">
            <li  v-for="(value,index) in friendList">
                <img :src="value.avatar" style="width: 20px;height: 20px">
                <p style="float: left" @click="launchPchat(value)">{{value.username}}</p>
                <!--<input type="hidden" :value="value.id"/>-->
            </li>
        </ul>
    </div>
   <!-- <div >
        <ul class="main" >
            <li>
                <img src='http://tvax4.sinaimg.cn/crop.0.0.480.480.180/768c39d5ly8fjje1d0teej20dc0dcq35.jpg' style="width: 20px;height: 20px">
                <p>哈哈哈哈</p>
            </li>
        </ul>
    </div>-->

</template>

<script>
    import Bus from "common/evenBus"
    export default {
        name: "FriendList",
        created(){

        },
        mounted(){
            let aa=JSON.parse(localStorage.getItem("friendList"));

            //debugger
           // console.log("遍历friendList集合")
            // let friendListElement = this.friendList[0];
            // for (var i=0;i<this.friendList.length;i++){
            //     console.log(this.friendList[i])
            // }
           // console.log(aa)
            this.friendList=aa;
            //console.log(this.friendList.length)
          //  debugger
          //   let childArray = this.childArray;
          //   console.log(childArray);
            // var aa=this.childArray;
            // console.log("aa:"+aa)
            // let userInfo = this.$store.state.userInfo;
            //     const data={
            //         img:userInfo.avatar,
            //         name:userInfo.username,
            //         id:userInfo.id
            //     }
            // this.friendList.push(data)
            //发送请求加载线上人数：
            // Bus.$on("aaa", (message) => {
            //     const data={
            //         img:message.avatar,
            //         name:message.username,
            //         id:message.id
            //     }
            //     this.friendList.push(data)
            // });
        },
        props:['childArray'],
        // props:{
        //     'friendList':Array
        // },
        data () {
            return {
                friendList:[],
                //friendList:this.friendList,
                    // {
                    //     "img":"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2022894887,995087717&fm=26&gp=0.jpg",
                    //     "name":"aa",
                    //     "id":1
                    // },
                    // {
                    //     "img":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1217906863,218343761&fm=26&gp=0.jpg",
                    //     "name":"bb",
                    //     "id":2
                    // },
                    // {
                    //     "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-af83bfea4dbf90fc7d3571ddb00753ec_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618298190&t=593435ffc3bdfc2d0688f8d71634d83a",
                    //     "name":"cc",
                    //     "id":3
                    // }
               // ],
                count: 10
            }
        },
        methods: {
            load () {
                this.count += 2
            },
            launchPchat: function (obj) {
                //debugger
               // console.log(obj)
                let aa=JSON.parse(sessionStorage.getItem("mockUser"));
              //  console.log("100=========friend==localStorage.getItem(mockUser")
              //  console.log(aa)
                    const data={
                        currentChatType:'S',
                        bgmFlag:false,
                        chatFrameFlag:true,
                        GpersonFrameFlag:false,
                        title:obj.username,
                        titleImg:obj.avatar,
                        receiverId:obj.id,
                        senderId:aa.id
                    }
                    //console.log("107-friend===")
                        //  console.log(data)
                    Bus.$emit("singlechat",data);
            }
        }
    }
</script>

<style scoped>
    .main{
        overflow: hidden;
    }
    ul {
        list-style: none;
    }
    ul li{
        padding-bottom: 30px;
    }
    .concat li{
        width: 100%;
    }
    .main li img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: block;
        float: left;
    }
    .main li p{
        font-size: 16px;
        float: left;
        margin-left: 10px;
        /*line-height: 40px;*/
    }
    .main li p:last-child{
        font-size: 12px;
        color: #7f7f7f;
        float: right;
    }
</style>
